// 动态渲染生成页面
function setPage(){
    // 定义变量储存字符串
    let ulStr = '';
    let olStr = '';

    // 循环变量数组 生成 字符串内容
    imgArr.forEach( function(item,key){
        // ul中标签等内容 
        ulStr += `<li><img src="../image/${item.name}"></li>`;

        // ol中标签等内容
        olStr += key === 0 ? `<li class="active" name="focus" num="${key}"></li>` : `<li  name="focus" num="${key}"></li>`;
    })
     
    // 写入标签中
    oUl.innerHTML = ulStr;
    oOl.innerHTML = olStr;

    // 获取 写入的 ul>li ol>li
    oUlLis = oBanner.querySelectorAll('ul>li');
    oOlLis = oBanner.querySelectorAll('ol>li');

    // 克隆 第一个 和 最后 ul>li
    let first = oUlLis[0].cloneNode(true);
    // 为什么加一个oUlLis.length-1???
    let last = oUlLis[oUlLis.length-1].cloneNode(true);

    // 克隆的第一个 写入 ul最后
    oUl.appendChild(first);
    // 克隆的最后一个 写入 ul起始
    oUl.insertBefore(last , oUlLis[0]);

    // 获取 li 标签的宽度
    // 为啥用offset？？？
    liWidth = oUlLis[0].offsetWidth;

    // 重新设定 ul宽度
    oUl.style.width = liWidth * (length+2) + 'px';

    // ul标签向左定位一个li宽度
    oUl.style.left = -liWidth + 'px';

    /* 

    // 节点操作方式
    imgArr.forEach( function(item,key){
        // 创建 ul>li 标签对象 
        const ulLi = document.createElement('li');
        // 创建 ul>li标签中的 img标签
        const ulLiImg = document.createElement('img');
        // 设定 img标签,src属性
        ulLiImg.setAttribute('src' , `./images/${item.name}`);
        // img标签 要写入 ul>li标签
        ulLi.appendChild(ulLiImg)
        // ul>li 标签 写入 ul中
        oUl.appendChild( ulLi );

        // 创建 ol>li 标签对象
        const olLi = document.createElement('li');
        // 设定 name 属性 和 num属性
        olLi.setAttribute( 'name' , 'focus' );
        olLi.setAttribute( 'num' , key );
        // 第一个ol>li 添加 class,active
        if( key === 0 ){
            olLi.classList.add('active');
        }
        // ol>li标签写入ol标签中
        oOl.appendChild(olLi);
    })

    */


}
 
// 自动轮播
function autoLoop(){
    // 通过 定时器 实现 间隔一段时间 就切换图片
    // 定时器的时间 必须大于 move()执行的时间
    intVal = setInterval( function(){
        // 给 index 累加1
        index++;

        // 调用 设定 焦点样式 函数
        // 一旦执行 轮播图切换 就 执行 样式的改变
        setFocusStyle();

        // 调用 move() 运动函数 让 ul根据新的index数值执行定位
        move( oUl , { left : -liWidth * index } , moveEndFun );        
    } , 3000 )

}

// 运动终止的回调函数
function moveEndFun(){
    // 判断 index数值 
    // 如果是 最后一个li 切换到 第二个li , 给ul瞬间切换定位
    // 如果是 第一个li 切换到 倒数第二个li , 给ul瞬间切换定位
    if( index === length+2-1 ){
        index = 1;
        oUl.style.left = -liWidth * index + 'px';
    }else if( index === 0 ){
        index = length+2-1-1;
        oUl.style.left = -liWidth * index + 'px';
    }

    // 一个li切换结束 bool赋值true
    bool = true;
}

// 焦点样式切换函数
function setFocusStyle(){
    // 循环遍历 所有的 ol>li 清除 class.active
    oOlLis.forEach( function(item,key){
        // 清除 样式
        item.classList.remove('active');

        // 给 和 index对应的 ol>li 添加样式
        if( key === index-1 ){
            item.classList.add('active');
        }
    })

    // 两个特殊情况的设定
    // index 是 最后一个li的索引下标 给 第一个ol>li 添加样式
    if( index === length+2-1 ){
        oOlLis[0].classList.add('active');

    // index 是 第一个li的索引下标 给 最后一个ol>li 添加样式
    }else if( index === 0 ){
        oOlLis[oOlLis.length-1].classList.add('active');
    }
}

// 鼠标的移入移出
function setMouse(){
    // 给 父级标签 添加事件 子级不要触发

    // 鼠标移入
    oBanner.addEventListener('mouseenter' , function(){
        // 清除定时器
        clearInterval( intVal );
    })

    // 鼠标移入
    oBanner.addEventListener('mouseleave' , function(){
        // 再起启动调用 自动轮播函数
        autoLoop();
    })
}

// 点击效果
function setClick(){
    // 给父级添加点击事件 通过事件委托完成
    oBanner.addEventListener( 'click' , function(e){

        // 触发事件的标签e.target,name属性值是left,点击的是 左按钮
        if( e.target.getAttribute('name') === 'left' ){
            // 防止点击过快
            if(bool){
                bool = false;
            }else{
                return;
            }

            // index 累减1
            index--;

            // 调用函数 设定焦点样式
            setFocusStyle();

            // 根据新的index,运动切换显示图片
            move( oUl , { left : -liWidth * index } , moveEndFun ); 
        
        // 触发事件的标签e.target,name属性值是right,点击的是 右按钮
        }else if( e.target.getAttribute('name') === 'right' ){
            // 防止点击过快
            if(bool){
                bool = false;
            }else{
                return;
            }

            // index 累加1
            index++;

            // 调用函数 设定焦点样式
            setFocusStyle();

            // 根据新的index,运动切换显示图片
            move( oUl , { left : -liWidth * index } , moveEndFun ); 
        
        // 触发事件的标签e.target,name属性值是focus,点击的是 焦点按钮
        }else if( e.target.getAttribute('name') === 'focus' ){
            // 防止点击过快
            if(bool){
                bool = false;
            }else{
                return;
            }

            // 获取 num属性值 +1 赋值给 index变量
            index = e.target.getAttribute('num')-0 +1;

            // 调用函数 设定焦点样式
            setFocusStyle();

            // 根据新的index,运动切换显示图片
            move( oUl , { left : -liWidth * index } , moveEndFun ); 
        }

    })
}

// 浏览器最小化
function hid(){
    // 给 整个 文档 添加事件 
    // visibilitychange 浏览器显示状态改变事件
    // 浏览器 显示状态 改变 就会触发 
    document.addEventListener( 'visibilitychange' , function(){
        // console.dir( document.visibilityState )

        // document.visibilityState 浏览器显示状态描述
        // hidden 表示 隐藏 
        if( document.visibilityState === 'hidden' ){
            // 如果 浏览器是 隐藏/最小化 状态
            // 停止自动轮播
            clearInterval( intVal );

        // document.visibilityState 浏览器显示状态描述
        // visible 表示 显示 
        }else if( document.visibilityState === 'visible' ){
            // 如果 浏览器是 显示 状态
            // 再次调用 自动轮播
            autoLoop();
        }
    })
}